<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div style="display: flex; flex-wrap: wrap">
      <div>
        <div id="player-container" style="width: 600px; height: 600px"></div>
        <button class="btn">先走路后一直跑</button>
        <button class="btn">随机</button>
      </div>
      <div id="player-container2" style="width: 600px; height: 600px"></div>
      <div id="player-container3" style="width: 600px; height: 600px"></div>
      <div id="player-container4" style="width: 600px; height: 600px"></div>
    </div>
    <script type="module">
      const spine = await import("@esotericsoftware/spine-player");

      const player = new spine.SpinePlayer("player-container", {
        jsonUrl: "./assets/spineboy-pro.json",
        atlasUrl: "./assets/spineboy-pma.atlas",
        premultipliedAlpha: false, // 等处理 图像透明度和混合
        alpha: true, // 背景是否透明
        scale: 1, // 缩放比例
        showControls: false, // 是否显示控制器
        animation: "idle", // 默认播放动画
      });

      const buttons = document.querySelectorAll(".btn");

      buttons[0].addEventListener("click", () => {
        if (player.paused) player.play();
        // 切换动画
        player.setAnimation("walk", false);
        // 队列动画（当前动画播放完后接 "jump" 动画，只播放1次）
        player.addAnimation("run", true);
      });

       buttons[1].addEventListener("click", () => {
        if (player.paused) player.play();
        const animations = player.skeleton.data.animations.map(
          (anim) => anim.name
        );

        // 切换动画
        player.setAnimation(
          animations[Math.floor(Math.random() * animations.length)],
          true
        );
      });

      new spine.SpinePlayer("player-container2", {
        jsonUrl: "./assets/fejing.json",
        atlasUrl: "./assets/fejing.atlas",
        premultipliedAlpha: false, // 等处理 图像透明度和混合
        alpha: true, // 背景是否透明
        scale: 1, // 缩放比例
        showControls: false, // 是否显示控制器
        animation: "idle", // 默认播放动画
      });

      new spine.SpinePlayer("player-container3", {
        jsonUrl: "./assets/daheita.json",
        atlasUrl: "./assets/daheita.atlas",
        premultipliedAlpha: false, // 等处理 图像透明度和混合
        alpha: true, // 背景是否透明
        scale: 1, // 缩放比例
        showControls: false, // 是否显示控制器
        animation: "idle", // 默认播放动画
      });

      new spine.SpinePlayer("player-container4", {
        jsonUrl: "./assets/saife.json",
        atlasUrl: "./assets/saife.atlas",
        premultipliedAlpha: false, // 等处理 图像透明度和混合
        alpha: true, // 背景是否透明
        scale: 1, // 缩放比例
        showControls: false, // 是否显示控制器
        animation: "idle", // 默认播放动画
      });
    </script>
  </body>
</html>
